<template>
	<div>
		<div>
			<el-row>
				<el-button type="primary" size="mini" round @click="gotoAdd()"><i class="el-icon-circle-plus-outline"></i> 新增</el-button>
				<el-button type="success" size="mini" round><i class="el-icon-finished"></i> 修改</el-button>
				<el-button type="danger" size="mini" round><i class="el-icon-delete"></i> 删除</el-button>
				<el-button type="primary" size="mini" round><i class="el-icon-printer"></i> 打印</el-button>
			</el-row>
		</div>
		<hr />
		<div>
			<el-form ref="form" :model="form" label-width="80px" size="small">
				<el-row :gutter="20">
					<el-col :span="5">
						<el-form-item prop="theme" label="主题:">
							<el-input v-model="form.theme"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="applicant" label="申请人:">
							<el-input v-model="form.applicant"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="appdept" label="申请部门:">
							<el-select v-model="form.appdept" filterable clearable placeholder="请输入或选择">
								<el-option v-for="item in dept" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="5">
						<el-form-item prop="state" label="审批状态">
							<el-select v-model="form.state" clearable placeholder="请选择">
								<el-option v-for="item in states" :key="item.value" :label="item.label" :value="item.value">
								</el-option>
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :span="4">
						<el-button type="primary" size="small" @click="query()">查询</el-button>
					</el-col>
				</el-row>
			</el-form>
		</div>
		<h2>采购申请列表</h2>
		<div class="reqlist-main">
			<el-table 
			size="mini" :data="reglist.slice((currentPage-1)* pageSize,currentPage*pageSize)" 
			height="400" border style="width:100%" 
			@selection-change="handleSelectionChange" 
			@cell-click="handleCell">
				<el-table-column fixed type="selection" width="55"></el-table-column>
				<el-table-column align="center" width="80" type="index" label="序号"></el-table-column>
				<el-table-column align="center" width="120" prop="appId" label="单据编号">
				</el-table-column>
				<el-table-column align="center" width="150" prop="theme" label="主题"></el-table-column>
				<el-table-column align="center" width="120" prop="purtype" label="采购类别"></el-table-column>
				<el-table-column align="center" width="120" prop="applicant" label="申请人"></el-table-column>
				<el-table-column align="center" width="120" prop="appdept" label="申请部门"></el-table-column>
				<el-table-column align="center" width="180" prop="appdate" label="申请日期"></el-table-column>
				<el-table-column align="center" width="180" prop="address" label="到货地址"></el-table-column>
				<el-table-column align="center" width="120" prop="state" label="状态"></el-table-column>
			</el-table>
		</div>
		<div class="block">
			<el-pagination
				background="true"
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="currentPage"
				:page-sizes="[5, 10, 20, 30]"
				:page-size="pageSize"
				layout="total, sizes, prev, pager, next, jumper"
				prev-text="上一页"
				next-text="下一页"
				:total="reglist.length">
			</el-pagination>
		</div>
	</div>
</template>

<script>
	export default {
		data() {
			return{
				form:{
					theme:'',
					applicant:'',
					appdept:'',
					state:''
				},
				dept: [{
					value: '采购部',
					label: '采购部'
				}, {
					value: '仓管部',
					label: '仓管部'
				}, {
					value: '销售部',
					label: '销售部'
				}, {
					value: '人事部',
					label: '人事部'
				}, {
					value: '财务部',
					label: '财务部'
				}],
				states: [{
					value: '待审批',
					label: '待审批'
				}, {
					value: '审批中',
					label: '审批中'
				}, {
					value: '已通过',
					label: '已通过'
				},{
					value: '未通过',
					label: '未通过'
				}],
				reglist:[{
					appId:'',
					theme:'',
					purtype:'',
					applicant:'',
					appdept:'',
					appdate:'',
					address:'',
					state:''
				}],
				currentPage: 1,
				pageSize: 10,
				result:[]
			}
		},
		created() {
			
			let _this = this;
			this.$axios.post(
				"purApp/select",this.form					
			)
				.then(function(v){
					_this.reglist = v.data;
				})
				.catch(function(ex){
					alert("数据走丢了")
				})
			
		},
		methods:{
			handleSelectionChange(val) {
				this.multipleSelection = val;
			},
			handleSizeChange(val) {
				this.pageSize=val;
				console.log(`每页 ${val} 条`);
			},
			handleCurrentChange(val) {
				this.currentPage=val;
				console.log(`当前页: ${val}`);
			},
			
			handleCell(row, column, cell, event){
				console.log("编号："+row.appId);
				this.queryById(row);
				
			},
			queryById(row){
				let _this = this;
				//let param={'appId':row.appId};
				console.log("参数："+row.appId);
				_this.$axios.post("purApp/selectById?appId="+row.appId+"").then(function (res) {
					console.log("返回值："+res.data);
					_this.result = res.data;
					console.log(JSON.stringify(res.data));
					
					_this.toRequisition(_this.result);
					
				})
				.catch(function (error) {
					alert("error");
				});
			},
			toRequisition(result){
				this.$router.push({
					path: '/Purchase_requisition',
					name: 'Purchase_requisition',
					params:{
						result: this.result,
						show:'false'
					},
				});
			
			},
			//点击新增跳转到新增的页面
			gotoAdd(){
				this.$router.replace('/Purchase_requisition')
			}
		}
	}
</script>

<style>
	.reqlist-main{
		border: 2px solid gainsboro;
		padding-top: 15px;
		padding-left: 20px;
		padding-right: 20px;
	}
</style>
